<template>
    <article class="echart-chart">
        <div class="inside">
            <header><i class="el-icon-location-outline"></i> 教育比例</header>
            <div class="chartBox clearfix">
                <article>
                    <div class="regionType-button clearfix" v-show="!chartNoDataShow">
                        <el-button-group>
                            <el-button type="primary" v-for="(item, key, index) in EducationData" :key="index" v-if="item" size="mini" @click="regionTypeChange(key)">{{regionTranslation(key)}}</el-button>
                        </el-button-group>
                    </div>
                    <div class="chart-div" id="Education-chart" v-show="!chartNoDataShow"></div>
                </article>
                <h4 v-show="chartNoDataShow">暂未查询到数据！</h4>
            </div>
            <p v-show="false">{{getEducation}}</p>
        </div>
    </article>
</template>

<script>
    export default {
        data() {
            return {
                EducationData: null,//教育数据
                stateEducationData: null,//州——教育数据
                cityEducationData: null,//城市——教育数据
                zipEducationData: null,//邮编——教育数据
                countyEducationData: null,//郡县——教育数据
                neighbourhoodEducationData: null,//附近——教育数据

                myEcharts: '',//教育比例——饼图
                regionType: 'state',//地区级别

                chartNoDataShow: false, //判断是否有无数据
            }
        },
        computed: {
            getEducation() {
                if(this.$store.getters.get_homejunctionData.education){
                    this.EducationData = this.$store.getters.get_homejunctionData.education;
                    this.stateEducationData = this.$store.getters.get_homejunctionData.education.state;
                    this.cityEducationData = this.$store.getters.get_homejunctionData.education.city;
                    this.zipEducationData = this.$store.getters.get_homejunctionData.education.zip;
                    this.countyEducationData = this.$store.getters.get_homejunctionData.education.county;
                    this.neighbourhoodEducationData = this.$store.getters.get_homejunctionData.education.neighbourhood;

                    this.$nextTick(() => {
                        this.myEcharts = echarts.getInstanceByDom(document.getElementById('Education-chart'));
                        if (this.myEcharts === undefined) {
                            this.myEcharts = echarts.init(document.getElementById('Education-chart'));
                        }
                        this.myEcharts.showLoading();
                        window.addEventListener('resize', () => {
                            this.myEcharts.resize();
                        });

                        this.get_Education();
                    })
                }
                return this.$store.getters.get_homejunctionData.education
            }
        },
        created() {
        },
        mounted() {

        },
        beforeDestroy () {
            if(this.myEcharts){
                this.myEcharts.dispose();
            }
        },
        methods: {
            //获取教育比例数据
            get_Education() {
                this.$nextTick(() => {
                    if(this.EducationData){
                        this.chartNoDataShow = false;
                        this.Education_charts(this.stateEducationData.highschool, this.stateEducationData.associate, this.stateEducationData.bachelor, this.stateEducationData.graduate);
                    }else{
                        this.chartNoDataShow = true;
                    }
                })
            },
            //地区级别Change事件
            regionTypeChange(value){
                if (value == 'state') {
                    this.Education_charts(this.stateEducationData.highschool, this.stateEducationData.associate, this.stateEducationData.bachelor, this.stateEducationData.graduate);
                }else if (value == 'city') {
                    this.Education_charts(this.cityEducationData.highschool, this.cityEducationData.associate, this.cityEducationData.bachelor, this.cityEducationData.graduate);
                }else if (value == 'zip') {
                    this.Education_charts(this.zipEducationData.highschool, this.zipEducationData.associate, this.zipEducationData.bachelor, this.zipEducationData.graduate);
                }else if (value == 'county') {
                    this.Education_charts(this.countyEducationData.highschool, this.countyEducationData.associate, this.countyEducationData.bachelor, this.countyEducationData.graduate);
                }else if (value == 'neighbourhood') {
                    this.Education_charts(this.neighbourhoodEducationData.highschool, this.neighbourhoodEducationData.associate, this.neighbourhoodEducationData.bachelor, this.neighbourhoodEducationData.graduate);
                }
            },
            //教育比例——饼图
            Education_charts(highschool, associate, bachelor, graduate){
                let other = 100 - highschool - associate - bachelor - graduate;
                this.myEcharts.hideLoading();
                this.myEcharts.setOption({
                    tooltip : {
                        trigger: 'item',
                    },
                    legend: {
                        orient: 'horizontal',
                        left: '20',
                        data: ['高中', '专科', '本科', '研究生', '其他']
                    },
                    series : [{
                        name: '教育比例',
                        type: 'pie',
                        radius :  ['20%', '50%'],//圆的内外半径
                        center: ['50%', '50%'],//圆的X,Y轴平移
                        data:[
                            {
                                value: this.$accounting.formatMoney(highschool, "", 2),
                                name: '高中',
                            },
                            {
                                value: this.$accounting.formatMoney(associate, "", 2),
                                name: '专科',
                            },
                            {
                                value: this.$accounting.formatMoney(bachelor, "", 2),
                                name: '本科',
                            },
                            {
                                value: this.$accounting.formatMoney(graduate, "", 2),
                                name: '研究生',
                            },
                            {
                                value: this.$accounting.formatMoney(other, "", 2),
                                name: '其他',
                            },
                        ],
                        //高亮的扇区和标签样式
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        label:{
                            formatter:'{b}：{c}%'
                        }
                    }],
                    color: ['#40c3f9', '#ffbf53', '#fe5960', '#00bc7b', '#f963a0'],

                });
            },

        },
        components: {}
    }
</script>

<style scoped lang="less" type="text/less">
</style>
